<template>
  <div class="login-container">
    <el-text class="login-title">医疗预约系统——患者端</el-text>
    <el-card class="login-card">
      <!--选择 手机号 或 诊疗卡号-->
      <el-tabs stretch v-model="activeName" class="demo-tabs">
        <el-form :model="form" label-width="auto" style="max-width: 600px">

         <el-tab-pane label="手机号登录" name="phone">
           <el-form-item label="手机号">
             <el-input v-model="form.phone" placeholder="请输入手机号"/>
           </el-form-item>
         </el-tab-pane>

         <el-tab-pane label="诊疗卡号登录" name="card">
           <el-form-item label="诊疗卡号">
             <el-input v-model="form.medicalCard" placeholder="请输入诊疗卡号"/>
           </el-form-item>
         </el-tab-pane>

          <el-form-item label="密码" prop="pass" style="margin-bottom: 8px;">
            <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码"/>
          </el-form-item>

          <el-row>
            <el-col  style="margin-bottom: 8px;">
              <router-link to="/forget" class="el-link" >
                忘记密码？
              </router-link>
            </el-col>
          </el-row>

          <el-row style="float:right;">
            <el-button @click="onRegister">
              注册
            </el-button>
            <el-button type="primary" @click="onSubmit">
              登录
            </el-button>
          </el-row>

        </el-form>
      </el-tabs>
    </el-card>
  </div>
</template>


<script setup>
import {reactive, ref} from "vue";
import { useRouter } from "vue-router"
// import { useStore } from "vuex"
import loginApi from "@/apis/login";


const router = useRouter();
// const radio = ref('0');


const form = reactive({
  phone: '',
  medicalCard: '',
  password: ''
})

let response = ref('');

const activeName = ref('phone')



//由后台判断是手机号还是诊疗卡号，0 手机号 1 诊疗卡号
const onSubmit = async () =>{
  const data = {
    phone: form.phone,
    medicalCard: form.medicalCard,
    password: form.password
  }
  // console.log(data)
  try{
    response = await loginApi.patientLogin(data);
    console.log(response)
    handleLoginSuccess(response)
    // console.log(sessionStorage.getItem('authorization'))
    //登录成功后自动跳转到Home页面
    await router.push({name: 'Home'});
  }catch(e){
    // 登录失败重定向回login页面
    await router.push({name: 'Login'});
  }
}

const onRegister = () =>{
  router.push({name: 'Register'});
}

const handleLoginSuccess = (response) =>{
  sessionStorage.setItem('authorization',response.data.authorization)
  sessionStorage.setItem('userInfo', JSON.stringify(response.data))
  // console.log(response.data)
};

</script>

<style scoped>

.login-card{
  width: 23%; /* 根据需要调整宽度百分比 */
  height: 35%; /* 根据需要调整高度百分比 */
  position: absolute; /* 使用 absolute 而不是 fixed，以便相对于最近的已定位祖先元素定位 */
  top: 33%; /* 距离顶部10% */
  left: 69%; /* 距离左侧50% */
  transform: translateX(-50%); /* 向左移动自身宽度的50%，以居中对齐 */
  //width: 320px;
  //position: fixed;
  //top: 220px;
  //left: 820px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-link {
  color: #409EFF; /* Element Plus 默认的链接颜色 */
  text-decoration: none; /* 去除下划线 */
  float: right;
}

.login-container{
  background-image: url('../../assets/MA-LOGIN.png');
  background-size: cover;
  height: 100%;
  /* 其他样式属性 */
}

.login-title{
  color: #166ea6;
  font-weight: bold;
  font-size: 1.5vw; /* 使用视口宽度的3%作为字体大小，可以根据需要调整 */
  position: absolute; /* 使用 absolute 而不是 fixed，以便相对于最近的已定位祖先元素定位 */
  top: 26%; /* 距离顶部8% */
  left: 69%; /* 距离左侧50% */
  transform: translateX(-50%); /* 向左移动自身宽度的50%，以居中对齐 */
  //color: #166ea6;
  //font-weight: bold;
  //font-size: 20px;
  //position: fixed;
  //top: 172px;
  //left: 867px;
}
</style>
